<template>
  <el-card class="examine-list">
    <div class="examine-list-content">
      <!-- 搜索和筛选区域 -->
      <div class="filter-section">
        <el-form layout="inline">
          <el-form-item>
            <el-input
                v-model="searchQuery"
                placeholder="搜索上传者或备注"
                clearable
                @clear="handleSearchClear"
            >
              <template #append>
                <el-button @click="handleSearch">
                  <el-icon><Search /></el-icon>
                </el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="filterStatus" placeholder="审核状态">
              <el-option label="全部" value="all" />
              <el-option label="待审核" value="pending" />
              <el-option label="已通过" value="approved" />
              <el-option label="已拒绝" value="rejected" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <!-- 审核列表 -->
      <div class="list-container">
        <el-scrollbar>
          <el-table
              :data="paginatedPoints"
              style="width: 100%"
              @row-click="handleRowClick"
              :row-class-name="getRowClassName"
              v-loading="loading"
          >
            <el-table-column label="点位信息">
              <template #default="{ row }">
                <div class="point-info">
                  <div class="info-row">
                    <span class="label">ID:</span> {{ row.id }}
                    <span class="label">坐标:</span> {{ row.longitude.toFixed(6) }}, {{ row.latitude.toFixed(6) }}
                    <span class="label">上传者:</span> {{ row.uploader }}
                  </div>
                  <div class="info-row">
                    <span class="label">备注:</span> {{ row.remarks || '无' }}
                    <span class="label">提交时间:</span> {{ row.createdAt }}
                    <span class="label">状态:</span>
                    <el-tag :type="getStatusType(row.status)" size="small">
                      {{ getStatusText(row.status) }}
                    </el-tag>
                  </div>
                  <div class="action-row">
                    <el-button
                        type="primary"
                        size="small"
                        @click.stop="previewImages(row.images)"
                    >
                      <el-icon><Picture /></el-icon> 查看街景
                    </el-button>
                    <el-button
                        v-if="row.status === 'pending'"
                        type="success"
                        size="small"
                        @click.stop="handleApprove(row.id)"
                    >
                      通过
                    </el-button>
                    <el-button
                        v-if="row.status === 'pending'"
                        type="danger"
                        size="small"
                        @click.stop="handleReject(row.id)"
                    >
                      拒绝
                    </el-button>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>

        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :total="totalPoints"
              layout="prev, pager, next, jumper"
              @current-change="handlePageChange"
          />
        </div>
      </div>

      <!-- 图片预览对话框 -->
      <el-dialog v-model="imageDialogVisible" title="街景图片预览">
        <div class="image-preview-container">
          <div v-for="(image, index) in currentImages" :key="index" class="image-item">
            <img :src="image" alt="街景图片" class="preview-image" />
          </div>
        </div>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
import { ref, computed } from 'vue'
import { Search, Picture } from '@element-plus/icons-vue'

export default {
  name: 'ExamineList',
  props: {
    points: {
      type: Array,
      required: true
    }
  },
  emits: ['select-point', 'approve', 'reject'],
  setup(props, { emit }) {
    const searchQuery = ref('')
    const filterStatus = ref('pending')
    const currentPage = ref(1)
    const pageSize = ref(10)
    const loading = ref(false)
    const imageDialogVisible = ref(false)
    const currentImages = ref([])

    // 计算属性
    const filteredPoints = computed(() => {
      let result = [...props.points]

      // 状态筛选
      if (filterStatus.value !== 'all') {
        result = result.filter(p => p.status === filterStatus.value)
      }

      // 搜索筛选
      if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase()
        result = result.filter(p =>
            (p.uploader && p.uploader.toLowerCase().includes(query)) ||
            (p.remarks && p.remarks.toLowerCase().includes(query)))
      }

      return result
    })

    const totalPoints = computed(() => filteredPoints.value.length)

    // 分页数据
    const paginatedPoints = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value
      const end = start + pageSize.value
      return filteredPoints.value.slice(start, end)
    })

    // 方法
    const getStatusType = (status) => {
      switch (status) {
        case 'approved': return 'success'
        case 'rejected': return 'danger'
        default: return 'warning'
      }
    }

    const getStatusText = (status) => {
      switch (status) {
        case 'approved': return '已通过'
        case 'rejected': return '已拒绝'
        default: return '待审核'
      }
    }

    const getRowClassName = ({ row }) => {
      return `status-${row.status}`
    }

    const handleRowClick = (row) => {
      emit('select-point', row)
    }

    const handleApprove = (pointId) => {
      emit('approve', pointId)
    }

    const handleReject = (pointId) => {
      emit('reject', pointId)
    }

    const handleSearch = () => {
      currentPage.value = 1
    }

    const handleSearchClear = () => {
      searchQuery.value = ''
      currentPage.value = 1
    }

    const handlePageChange = (page) => {
      currentPage.value = page
    }

    const previewImages = (images) => {
      currentImages.value = images
      imageDialogVisible.value = true
    }

    return {
      searchQuery,
      filterStatus,
      currentPage,
      pageSize,
      loading,
      imageDialogVisible,
      currentImages,
      filteredPoints,
      paginatedPoints,
      totalPoints,
      Search,
      Picture,
      getStatusType,
      getStatusText,
      getRowClassName,
      handleRowClick,
      handleApprove,
      handleReject,
      handleSearch,
      handleSearchClear,
      handlePageChange,
      previewImages
    }
  }
}
</script>

<style scoped>
.examine-list {
  height: 100%;
  padding: 5px;
  overflow-y: auto;
  border: none;
  box-shadow: none;
}

.examine-list-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.filter-section {
  padding: 10px;
}

.list-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pagination {
  padding: 10px;
  display: flex;
  justify-content: center;
}

.image-preview-container {
  display: grid;
  téléphon: repeat(2, 1fr);
  gap: 15px;
}

.preview-image {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: contain;
}

/* 行状态样式 */
:deep(.el-table .status-approved) {
  --el-table-tr-bg-color: #f0f9eb;
}

:deep(.el-table .status-rejected) {
  --el-table-tr-bg-color: #fef0f0;
}

:deep(.el-table .status-pending) {
  --el-table-tr-bg-color: #f5f7fa;
}

/* 统一表单元素样式 */
:deep(.el-form-item) {
  margin-bottom: 15px;
}

:deep(.el-form-item__label) {
  font-size: 14px;
  color: #303133;
}

:deep(.el-input__inner),
:deep(.el-select .el-input__inner) {
  font-size: 14px;
}

:deep(.el-button) {
  font-size: 14px;
}

/* 多行表格样式 */
.point-info {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.label {
  font-weight: bold;
  color: #606266;
  margin-right: 5px;
}

.action-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
</style>
